<template>
	<div>
		<p>
			<!--<el-form :inline="true" :model="wordBook" class="demo-form-inline">
				<el-form-item label="唯一键">
					<el-input v-model="wordBook.key" placeholder="请添加唯一键"></el-input>
				</el-form-item>
				<el-form-item label="唯一键描述">
					<el-input v-model="wordBook.desc" placeholder="请添加描述"></el-input>
				</el-form-item>
				<el-form-item label="值">
					<el-input v-model="wordBook.value" placeholder="请添加值"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">添加</el-button>
				</el-form-item>
			</el-form>-->
			<el-button type="primary" @click="addModalShow">添加数据字典</el-button>

			<p>
				<el-table :data="allWordData" style="width: 100%">
					<el-table-column prop="key_id" label="Key" width="180">
					</el-table-column>
					<el-table-column prop="name" label="描述" width="180">
					</el-table-column>
					<el-table-column prop="options" label="值">
						<template slot-scope="scope">
							<span>{{scope.row.options.join("、")}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<span><el-button @click="editionModal(scope.row)" type="text">修改</el-button></span>
							<span><el-button @click="delItem(scope.row)" type="text">删除</el-button></span>
						</template>
					</el-table-column>
				</el-table>
			</p>

			<!--添加定制化类型框-->
			<el-dialog title="添加模板类型" :visible="wordBookModal.visible" width="30%" :before-close="handleClose">
				<p>
					<span style="color: red;">*</span>
					<span>键名：</span>
					<el-input v-model="wordBookModal.key" type="text" style="width: 200px;"></el-input>
				</p>
				<p>
					<span style="color: red;visibility: hidden;">*</span>
					<span>描述：</span>
					<el-input v-model="wordBookModal.name" type="text" style="width: 200px;"></el-input>
				</p>
				<div class="fill" style="margin-top: 20px;">
					<inPanelTitle tipdesc="参考" introdesc="请添加单选选择字段"></inPanelTitle>
					<div v-for="(item,index) in wordBookModal.options" class="el-input__inner">
						<el-tag closable @close="optionRemove(index)">{{item}}</el-tag>
					</div>
					<el-input style="margin:10px 0px 10px 0px; width: 95%;" v-model="options_input" placeholder="请输入内容"></el-input>
					<div class="add_icon" @click="addOptionList">
						<i class="fa fa-plus fa-lg" style="transform: translateY(1px);"></i>
						<span>添加一个选项</span>
					</div>
				</div>
				<p>
				</p>
				<span slot="footer" class="dialog-footer">
		    <el-button @click="wordBookModal.visible = false">取 消</el-button>
		    <el-button type="primary" @click="addAllWordData(1)">添 加</el-button>
		  </span>
			</el-dialog>
		</p>
	</div>
</template>
<script type="text/javascript">
	import { kvDelete, kvGetAll, kvAction, Login } from '@/assets/util/api.js'
	export default {
		data() {
			return {
				access_token: "",
				options_input: "", //列表当前项数据
				wordBookModal: {
					visible: false,
					name: "",
					key: "", //鍵名
					options: [],
				},
				allWordData: "",
				action: "",
			}
		},
		mounted() {
			this.access_token = this.inStorage("get", "access_token");
			this.kvGetAll();
		},
		methods: {
			//获取全部数据字典信息
			kvGetAll() {
				var params = {
					access_token: this.access_token
				}
				kvGetAll(this, params).then((res) => {
					if(res.data.state == true) {
						this.allWordData = res.data.data;
					}
				})

			},
			//添加时显示modal
			addModalShow() {
				this.wordBookModal = {
					visible: false,
					name: "",
					key: "", //鍵名
					options: [],
				};
				this.wordBookModal.visible = true;
				this.action = 1;
			},
			//添加数据字典
			addAllWordData() {
				if(!this.wordBookModal.name || !this.wordBookModal.key) {
					this.$message.error("键名与描述不可为空！");
					return;
				}
				var params = {
					access_token: this.access_token,
					action: this.action,
					key_id: this.wordBookModal.key,
					name: this.wordBookModal.name,
					options: this.wordBookModal.options,
				}
				kvAction(this, params).then((res) => {
					if(res.data.state == true) {
						this.$message.success("添加成功！");
						this.kvGetAll();
						this.wordBookModal = {
							visible: false,
							name: "",
							key: "", //鍵名
							options: [],
						};
					}
					
					if(res.data.code) {
						this.$message.error(this.publicMsg(res.data.code, res.data.error));
					}
					this.wordBookModal.visible = false;
				})
			},
			//删除列表
			optionRemove(index) {
				this.wordBookModal.options.splice(index, 1);
			},
			editionModal(option) {
				this.action = 2;
				this.wordBookModal = {
					visible: true,
					name: option.name,
					key: option.key_id, //鍵名
					options: option.options,
				}
			},
			//添加列表
			addOptionList() {
				if(!!this.options_input) {
					this.wordBookModal.options.push(this.options_input);
					this.options_input = ""
				}
			},
			delItem(row) {
				var params = {
					access_token: this.access_token,
					key_id: row.key_id,
				}
				kvDelete(this, params).then(res => {
					if(res.data.state == true) {
						this.$message.success("删除成功！");
					}

					if(res.data.code) {
						this.$message.error(this.publicMsg(res.data.code, res.data.error));
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.add_icon {
		background: #A9B3BF;
		border-radius: 4px;
		color: #fff;
		padding: 10px 0;
		width: calc(100% - 48px);
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.add_icon:focus {
		box-shadow: 0 10px 10px 10px -10px #ffff;
	}
	
	.fill div.el-input__inner {
		background-color: #EBEEF5;
		border: 1px solid #EBEEF5;
		width: 95%;
		margin: 5px 0px 5px 0px;
	}
	
	.fill .el-input__inner:hover {
		border: 1px solid #EBEEF5;
	}
</style>